<!--  -->
<template>
  <div class="main-content kpiManagement">
    <div class="control-btn-box">
      <el-button type="primary" @click="addTypeModal = true"
        >新增分类</el-button
      >
    </div>
    <div class="kpi-screen-box">
      <el-form ref="kpiSearchForm" :model="kpiSearchForm">
        <el-form-item label="KPI模块">
          <el-select
            v-model="kpiSearchForm.kpiModule"
            multiple
            placeholder="请选择模块"
          >
            <el-option
              v-for="item in kpiList"
              :key="item.id"
              :label="item.cateName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人">
          <el-select
            v-model="kpiSearchForm.creater"
            multiple
            filterable
            placeholder="请选择创建人"
          >
            <el-option
              v-for="item in createrList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="kpiSearchForm.state" placeholder="请选择当前状态">
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button class="search-btn" type="primary">查询</el-button>
      </el-form>
    </div>
    <div class="kpi-content-box">
      <div class="kpi-calculate-item">
        <el-card class="box-card" v-for="item in kpiList" :key="item.id">
          <div slot="header" class="clearfix">
            <div class="kpi-card-name">
              <span class="visible isRead">可见</span>
              <span class="kpi-name">{{ item.cateName }}</span>
            </div>
            <div class="card-btn-box">
              <el-button type="text" @click="handleAddSecondKPI(item)"
                >新增</el-button
              >
              <el-button
                type="text"
                class="edit-btn"
                @click="handleEditTypeClick(item)"
                >编辑</el-button
              >
              <el-button
                class="delete-btn"
                type="text"
                @click="handleDeleteTypeClick(item)"
                >删除</el-button
              >
            </div>
          </div>
          <div class="text item taglist">
            <el-tag
              v-for="tag in item.childList"
              :key="tag.id"
              effect="plain"
              size="medium"
              closable
              :disable-transitions="false"
              @close="handleCloseTag(tag)"
              @click="handleClickTag(tag)"
            >
              {{ tag.cateName }}
            </el-tag>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新增分类 -->
    <bi-modal
      title="新增分类"
      modalType="medium"
      :showModal="addTypeModal"
      @cancel="addTypeModal = false"
      @submit="sureAddType()"
    >
      <template v-slot:body>
        <el-form ref="addTypeForm" :model="addTypeForm">
          <el-form-item label="分类名称">
            <el-input
              v-model="addTypeForm.typeName"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否可见">
            <el-switch v-model="addTypeForm.typeState" active-text="可见">
            </el-switch>
          </el-form-item>
        </el-form>
      </template>
    </bi-modal>

    <!-- 新增KPI -->
    <bi-modal
      title="新增KPI"
      modalType="medium"
      :showModal="addKpiModal"
      @cancel="closeAddKpiModal"
      @submit="sureAddKpi()"
    >
      <template v-slot:body>
        <el-form class="addKpiFormBox" ref="addKpiForm" :model="addKpiForm">
          <el-form-item label="KPI名称">
            <el-input
              v-model="addKpiForm.kpiName"
              placeholder="请输入KPI名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="计算公式">
            <el-input
              type="textarea"
              v-model="addKpiForm.calculate"
              placeholder="请输入计算公式"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input
              type="textarea"
              v-model="addKpiForm.remark"
              placeholder="请输入备注说明"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="addKpiForm.state" active-text="启用">
            </el-switch>
          </el-form-item>
        </el-form>
      </template>
    </bi-modal>

    <!-- 删除分类 -->
    <bi-modal
      :showModal="showDeleteModal"
      modalType="small"
      sureText="删除"
      @cancel="showDeleteModal = false"
      @submit="submitDeleteType()"
    >
      <template v-slot:body>
        <div class="modal-tips">{{ deleteText }}</div>
      </template>
    </bi-modal>

    <!-- 三级KPI列表 -->
    <el-drawer :title="currentTagKPIinfo.cateName" :visible.sync="drawer" direction="rtl" size="50%">
      <div class="drawer-table-box">
        <el-button type="primary" class="add-kpi-btn" @click="handleAddKpiClick()">新增KPI</el-button>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{
            color: '#000',
            fontSize: '14px',
            backgroundColor: '#f8f8f8',
          }"
          :row-style="{
            borderRadius: '20px',
          }"
        >
          <el-table-column prop="kpiName" label="KPI名称" fixed width="150">
          </el-table-column>
          <el-table-column prop="calculate" label="计算公式" width="250">
          </el-table-column>
          <el-table-column prop="remark" label="备注说明" width="250">
          </el-table-column>
          <el-table-column prop="creatTime" label="创建时间" width="180">
          </el-table-column>
          <el-table-column prop="creater" label="创建人" width="150">
          </el-table-column>
          <el-table-column prop="state" label="当前状态" width="120">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state" active-text="启用">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleEditClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDeleteClick(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Modal from "../../components/Modal";
export default {
  components: {
    "bi-modal": Modal,
  },
  data() {
    return {
      kpiSearchForm: {
        kpiModule: "",
        creater: "",
        state: "",
      }, // 筛选条件
      kpiList: [],
      tableData: [
        {
          creatTime: "2020-12-21 15:03:00",
          kpiName: "毛利",
          calculate: "总毛利=总产值-总成本",
          remark: "毛利的备注说明",
          creater: "刘青山",
          state: true,
        },
        {
          creatTime: "2020-12-21 15:03:00",
          kpiName: "付费保养毛利",
          calculate: "付费保养毛利=付费保养产值-付费保养成本",
          remark: "付费保养毛利的备注说明",
          creater: "刘青山",
          state: false,
        },
        {
          creatTime: "2020-12-21 15:03:00",
          kpiName: "机电毛利",
          calculate: "机电毛利=机电产值-机电成本",
          remark: "机电毛利的备注说明",
          creater: "刘青山",
          state: false,
        },
      ],
      currentPage: 1,
      createrList: [
        {
          value: "刘青山",
          label: "刘青山",
        },
        {
          value: "晚风",
          label: "晚风",
        },
        {
          value: "垂怜",
          label: "垂怜",
        },
      ], // 创建人列表
      stateList: [
        {
          value: "all",
          label: "全部",
        },
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      addTypeModal: false, // 控制新增分类 modal显示
      addTypeForm: {
        typeName: "",
        typeState: true,
      },
      addKpiModal: false, // 控制新增KPI modal显示
      addKpiForm: {
        kpiName: "",
        calculate: "",
        remark: "",
        state: true,
      },
      showDeleteModal: false, // 控制 删除分类modal显示
      deleteText: "",
      drawer: false, // 控制 三级KPI抽屉 显示
      currentTagKPIinfo: {}, // 当前点击二级KPI信息
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getFirstKPIlist();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 获取一级KPI列表
    getFirstKPIlist() {
      this.$api.handleKPI.getKPIlist().then(res => {
        console.log('kpi列表', res);
        if (res.length == 0) return this.$message.warning("暂无KPI模块");
        this.kpiList = res;
      })
    },
    // 分页 点击方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 表格编辑操作
    handleEditClick() {
      this.addKpiModal = true;
    },
    // 表格删除操作
    handleDeleteClick() {
      this.deleteText = "确认删除该项KPI吗？";
      this.showDeleteModal = true;
    },
    // 新增分类 确认
    sureAddType() {},
    // 新增KPI 确认
    sureAddKpi() {},
    // 打开新增KPImodal
    handleAddKpiClick() {
      this.addKpiModal = true;
      this.drawer = false;
    },
    // 编辑分类
    handleEditTypeClick() {
      this.addTypeModal = true;
    },
    // 打开删除分类modal
    handleDeleteTypeClick() {
      this.deleteText = "该分类名下KPI将会被连带删除，确认删除吗？";
      this.showDeleteModal = true;
    },
    // 确认删除分类
    submitDeleteType() {},
    // 点击二级KPI
    handleClickTag(tag) {
      this.drawer = true;
      this.currentTagKPIinfo = tag;
      // 查询三级KPI
      this.$api.handleKPI.getThirdKPIlist(tag.id).then(res => {
        console.log('三级KPI列表', res);
      })
    },
    // 删除二级KPI
    handleCloseTag() {},
    // 关闭新增KPImodal
    closeAddKpiModal() {
      this.addKpiModal = false;
      this.drawer = true;
    },
    // 添加二级KPI
    handleAddSecondKPI() {},
  },
};
</script>
<style lang="less">
.kpiManagement {
  .kpi-screen-box {
    margin-top: 20px;
    .el-form {
      .alignCenter();
      .el-form-item {
        margin-bottom: 0;
        margin-left: 10px;
        &:first-child {
          margin-left: 0;
        }
        .alignCenter();
      }
      .search-btn {
        margin-left: 12px;
      }
    }
  }
  .kpi-content-box {
    .kpi-calculate-item {
      .alignCenter();
      flex-wrap: wrap;
      .box-card {
        width: calc(50% - 10px);
        height: 300px;
        overflow-y: auto;
        margin-left: 20px;
        margin-top: 20px;
        &:nth-child(2n+1){
          margin-left: 0;
        }
        .taglist {
          .el-tag {
            color: @color-text-regular;
            background-color: @color-white;
            border-color: @border-color-lighter;
            margin-right: 10px;
            margin-top: 10px;
            height: 36px;
            line-height: 34px;
            cursor: pointer;
            &:hover {
              color: @color-primary;
              .shadow();
            }
          }
        }
        .kpi-card-name {
          float: left;
        }
        .card-btn-box {
          float: right;
          .el-button {
            padding: 3px 0;
          }
          .delete-btn {
            color: @color-danger;
            &:hover {
              color: @color-danger-hover;
            }
          }
          .edit-btn {
            color: @color-warning;
            &:hover {
              color: @color-warning-hover;
            }
          }
        }
        .visible {
          display: inline-block;
          padding: 2px 5px;
          border-radius: 2px;
          color: @color-white;
          background-color: @color-danger;
          font-size: 12px;
          margin-right: 10px;
          &.isRead {
            background-color: @color-primary;
          }
        }
        .kpi-name {
          font-size: 16px;
          font-weight: 600;
          margin-top: 2px;
        }
      }
    }
  }
  .addKpiFormBox {
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .drawer-table-box{
    padding: 0 20px;
    .add-kpi-btn{
      margin-bottom: 15px;
    }
  }
}
</style>
